<template>
  <div>
    <h3>会员列表页面</h3>
    <input type="button" value="增加" class="btn btn-primary" @click="add" />
    <hr />
    <div>
      会员编号:<input type="text" v-model="queryInfo.id" /> 会员名称:<input
        type="text"
        v-model="queryInfo.name"
      />
      会员等级:<select v-model="queryInfo.levelId">
        <option value="">请选择</option>
        <option :value="item.Id" v-for="item in memberLevelList" :key="item.Id">
          {{ item.LevelName }}
        </option>
      </select>
      <input
        type="button"
        value="查询"
        class="btn btn-success"
        @click="getList"
      />
    </div>
    <table class="table table-bordered">
      <tbody>
        <tr class="bg-primary">
          <td>Id</td>
          <td>会员名称</td>
          <td>手机号</td>
          <td>身份证</td>
          <td>会员等级</td>
          <td>生日</td>
          <td>余额</td>
          <td>操作</td>
        </tr>
        <tr v-for="item in list" :key="item.Id">
          <td>{{ item.Id }}</td>
          <td>{{ item.Name }}</td>
          <td>
            {{ item.Phone.substring(0, 3) + '****' + item.Phone.substring(7) }}
          </td>
          <td>{{ item.Card }}</td>
          <td>
            <span v-if="item.LevelId == 1">普通会员</span>
            <span v-if="item.LevelId == 2">黄金会员</span>
            <span v-if="item.LevelId == 3">白银会员</span>
            <span v-if="item.LevelId == 4">钻石会员</span>
          </td>
          <td>{{ item.Birthday }}</td>
          <td style="color: red">￥{{ item.Money.toFixed(2) }}</td>
          <td>
            <input
              type="button"
              value="修改"
              class="btn btn-success"
              @click="update(item.Id)"
            />
            <input
              type="button"
              value="删除"
              class="btn btn-danger"
              @click="del(item.Id)"
            />
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script setup lang="ts">
import axios from 'axios';
import { onMounted, ref, reactive } from 'vue';
import { useRouter } from 'vue-router';

const router = useRouter();

//后端需要的参数
let queryInfo = reactive({
  id: '',
  name: '',
  levelId: '',
});

let list: any = ref([]);
//接受后端返回的会员等级列表数据
let memberLevelList: any = ref([]);

//增加
const add = () => {
  router.push('/memberAdd');
};

onMounted(() => {
  getList();
  getMemnerList();
});
//修改操作
const update = (id: any) => {
  //页面跳转并且传递参数id
  router.push({
    path: '/memberUpd',
    query: {
      id: id,
    },
  });
};

//删除操作
const del = (id: any) => {
  //1.友好提示
  var f = confirm('请问您确定要删除吗？'); //返回值  true   false
  if (f) {
    //2.发送网络请求做删除操作
    axios({
      url: '/api/Members/DelMemeberItem',
      method: 'delete',
      params: {
        id: id,
      },
    })
      .then((res) => {
        console.log(res);
        if (res.data == 1) {
          alert('删除成功');
          //调会员显示的列表
          getList();
        } else {
          alert('删除失败');
          return;
        }
      })
      .catch((err) => {
        console.log(err);
      });
  }
};

//获取会员等级列表
const getMemnerList = () => {
  axios({
    url: '/api/Members/MemberLevelsList',
    method: 'get',
  })
    .then((res) => {
      console.log(res);
      //需要存储
      memberLevelList.value = res.data;
    })
    .catch((err) => {
      console.log(err);
    });
};

//获取列表数据
const getList = () => {
  axios({
    url: '/api/Members/MemberList',
    method: 'get',
    params: queryInfo,
  })
    .then((res) => {
      console.log(res);
      list.value = res.data;
    })
    .catch((err) => {
      console.log(err);
    });
};
</script>

<style scoped></style>
